<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="val" />
      <input type="text" v-model="vals" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      /**
       * watch:可以侦听vue实力上的数据变动
       * watch是默认是惰性的
       * 页面加载不会立刻回调watch函数
       * 没有缓存
       * 每次只能侦听一个
       * 和computed的区别
       * computed有缓存 watch没有缓存
       * computed可以监听多个
       */

       /**
        * 对于复杂数据类型
        * 需要开启深度侦听
        * 
       */
      const vm = new Vue({
        el: "#app",
        data: {
          val: "",
          vals:"dsadsa",
          person:{
            name:"王多余",
            display:"又酸又菜又多余"
          }
        },
        watch: {
          val(newval, oldval) {
            console.log(newval);
            console.log(oldval);
          },
          vals(newval,oldval){
            console.log(newval);
            console.log(oldval);
          },
          //侦听指定对象的变化
          "person.name"(newval,oldval){
              console.log(newval);
              console.log(oldval)
          }
        //   person:{
        //     //开启深度侦听
        //     //可以侦听对象中任意属性的变化
        //     deep:true,
        //     handler(newval){
        //           console.log(newval)
        //     }
        //   }
        },
        methods: {
          // handleDown(e){
          //   console.log(e.target.value)
          // }
        },
      });
    </script>
  </body>
</html>
